<template>
  <view class="payment-container">
    <!-- 商品列表区域 -->
    <view class="goods-list">
      <view class="goods-item" v-for="(goods, index) in goodsList" :key="index">
        <text class="goods-name">{{ goods.name }}</text>
        <text class="goods-quantity">x{{ goods.quantity }}</text>
      </view>
    </view>

    <!-- 合计金额区域 -->
    <view class="total-amount">
      <text class="total-label">合计金额</text>
      <text class="total-price">¥{{ totalPrice.toFixed(2) }}</text>
    </view>

    <!-- 支付方式选择区域 -->
    <view class="payment-methods">
      <text class="method-title">支付方式</text>
      
      <view 
        class="method-item" 
        v-for="(method, index) in paymentMethods" 
        :key="index"
        @click="toggleMethod(index)"
      >
        <view class="method-info">
          <image 
            :src="method.icon" 
            class="method-icon"
            mode="widthFix"
          ></image>
          <text class="method-name">{{ method.name }}</text>
        </view>
        <uni-icons 
          type="checkmark-circle" 
          size="36rpx" 
          color="#ff3b30" 
          v-if="method.checked"
        ></uni-icons>
      </view>
    </view>

    <!-- 支付按钮 -->
    <button class="pay-btn" @click="handlePay">支付</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 商品列表数据（假设单价与之前保持一致：矿泉水2元，可乐2元）
      goodsList: [
        { name: '娃哈哈矿泉水', quantity: 1, price: 2.00 },
        { name: '可口可乐', quantity: 1, price: 2.00 }
      ],
      // 支付方式数据（实际项目中替换为真实图标路径）
      paymentMethods: [
        { 
          name: '微信支付', 
          icon: '/static/images/wechat.png',  // 需替换为实际微信图标路径
          checked: true 
        },
        { 
          name: '支付宝支付', 
          icon: '/static/images/alipay.png',  // 需替换为实际支付宝图标路径
          checked: true 
        }
      ]
    };
  },
  computed: {
    // 计算合计金额
    totalPrice() {
      return this.goodsList.reduce((total, item) => {
        return total + (item.price * item.quantity);
      }, 0);
    }
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.goodsOrder')
  	});
  },
  methods: {
    // 切换支付方式选中状态
    toggleMethod(index) {
      this.paymentMethods[index].checked = !this.paymentMethods[index].checked;
    },
    // 处理支付逻辑
    handlePay() {
      // 检查是否选择了至少一种支付方式
      const hasSelected = this.paymentMethods.some(method => method.checked);
      if (!hasSelected) {
        uni.showToast({
          title: '请选择支付方式',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      // 显示支付加载状态
      uni.showLoading({
        title: '支付中...'
      });

      // 模拟支付请求（实际项目中替换为真实支付接口）
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '支付成功',
          icon: 'success',
          duration: 2000
        });
        
        // 支付成功后可跳转到结果页（示例）
        setTimeout(() => {
          uni.navigateBack(); // 或 uni.navigateTo({ url: '/pages/paySuccess/paySuccess' })
        }, 2000);
      }, 1500);
    }
  }
};
</script>

<style scoped>
.payment-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
  box-sizing: border-box;
}

/* 商品列表样式 */
.goods-list {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
}

.goods-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.goods-item:last-child {
  border-bottom: none;
}

.goods-name {
  font-size: 28rpx;
  color: #333;
}

.goods-quantity {
  font-size: 28rpx;
  color: #666;
}

/* 合计金额样式 */
.total-amount {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-label {
  font-size: 28rpx;
  color: #666;
}

.total-price {
  font-size: 32rpx;
  color: #ff3b30;
  font-weight: bold;
}

/* 支付方式样式 */
.payment-methods {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx 20rpx;
  margin-bottom: 40rpx;
}

.method-title {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.method-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.method-item:last-child {
  border-bottom: none;
}

.method-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.method-icon {
  width: 48rpx;
  height: 48rpx;
}

.method-name {
  font-size: 28rpx;
  color: #333;
}

/* 支付按钮样式 */
.pay-btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background-color: #ff3b30;
  color: #fff;
  font-size: 32rpx;
  border-radius: 12rpx;
  margin: 20rpx 0;
}
</style>